<template>
  <div class="my-info-container">
    <div class="back-button" @click="goBack">
      <i class="el-icon-arrow-left"></i> 返回
    </div>
    <el-descriptions class="my-info-descriptions" :title="page.employeeName + '的个人信息'" :column="3" border>
      <!-- 添加 my-info-title 类到标题 -->
      <template slot="title">
        <div class="my-info-title">修改信息</div>
      </template>

      <!-- 基本信息 -->
      <el-descriptions-item class="my-info-item">
        <template slot="label">
          <i class="el-icon-user"></i>
          员工ID
        </template>
        <span class="my-info-highlight">{{page.employeeId || '未知'}}</span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          员工号
        </template>
        <span>{{page.employeeNo || '未知'}}</span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          姓名
        </template>
        <span v-if="!isEditing">{{page.employeeName || '未知'}}</span>
        <el-input v-else v-model="page.employeeName" placeholder="请输入姓名" size="small"></el-input>
      </el-descriptions-item>

      <!-- 联系信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        <span v-if="!isEditing">{{page.employeePhone || '未知'}}</span>
        <el-input v-else v-model="page.employeePhone" placeholder="请输入手机号" size="small"></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          邮箱
        </template>
        <span v-if="!isEditing">{{page.email || '未知'}}</span>
        <el-input v-else v-model="page.email" placeholder="请输入邮箱" size="small"></el-input>
      </el-descriptions-item>

      <!-- 身份信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          账号
        </template>
        <span v-if="!isEditing">{{page.account || '未知'}}</span>
        <el-input v-else v-model="page.account" placeholder="请输入账号" size="small"></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-lock"></i>
          密码
        </template>
        <div class="password-container">
          <span v-if="!isEditing" class="password-text">{{ showPassword ? page.password : '********' }}</span>
          <el-input
              v-else
              v-model="page.password"
              :type="showPassword ? 'text' : 'password'"
              placeholder="请输入密码"
              size="small"
          ></el-input>
          <i
              class="password-toggle"
              :class="showPassword ? 'el-icon-view' : 'el-icon-view'"
              @click="showPassword = !showPassword"
          ></i>
        </div>
      </el-descriptions-item>

      <!-- 个人信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-male"></i>
          性别
        </template>
        <span v-if="!isEditing">{{formatGender(page.gender)}}</span>
        <el-select v-else v-model="page.gender" placeholder="请选择性别" size="small">
          <el-option label="男" :value="0"></el-option>
          <el-option label="女" :value="1"></el-option>
          <el-option label="未知" :value="2"></el-option>
        </el-select>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-time"></i>
          出生日期
        </template>
        <span v-if="!isEditing">{{formatDate(page.birthDate)}}</span>
        <el-date-picker
            v-else
            v-model="page.birthDate"
            type="date"
            placeholder="选择出生日期"
            size="small"
            style="width: 100%"
        ></el-date-picker>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-time"></i>
          入职日期
        </template>
        <span >{{formatDate(page.hireDate)}}</span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-management"></i>
          所属部门
        </template>
        <el-tag class="my-info-tag" size="small">
          <span v-if="loadingDepartment && !departmentCache[page.departmentId]">加载中...</span>
          <span v-else>{{ currentDepartmentName }}</span>
        </el-tag>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-suitcase"></i>
          职位
        </template>
        <span>{{page.position || '未知'}}</span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          职员等级
        </template>
        <el-tag class="my-info-tag" size="small">{{formatRole(page.role)}}</el-tag>
      </el-descriptions-item>

      <!-- 薪资和假期信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-coin"></i>
          薪资级别
        </template>
        <span >{{formatSalaryLevel(page.currentSalaryLevel)}}</span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i>
          剩余年假
        </template>
        <span >{{formatAnnualLeave(page.remainingAnnualLeave)}}</span>
      </el-descriptions-item>

      <!-- 状态信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-circle-check"></i>
          在职状态
        </template>
        <el-tag  class="my-info-tag" :type="page.isActive ? 'success' : 'danger'" size="small">
          {{formatActiveStatus(page.isActive)}}
        </el-tag>
      </el-descriptions-item>

      <!-- 备注信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-edit"></i>
          备注
        </template>
        <span v-if="!isEditing">{{page.comments || '无'}}</span>
        <el-input
            v-else
            v-model="page.comments"
            type="textarea"
            placeholder="请输入备注"
            size="small"
            :rows="2"
        ></el-input>
      </el-descriptions-item>

      <!-- 操作按钮 - 横跨整个宽度 -->
      <el-descriptions-item :span="3" class="full-width-button-item">
        <div class="button-container">
          <el-button
              class="my-info-button"
              type="primary"
              size="medium"
              @click="isEditing ? UpdateEmployee() : toggleEdit()"
          >
            <i class="el-icon-edit"></i>
            {{ isEditing ? '保存' : '编辑' }}
          </el-button>
<!--          <el-button-->
<!--              v-if="isEditing"-->
<!--              class="my-info-button"-->
<!--              type="text"-->
<!--              size="medium"-->
<!--              @click="cancelEdit"-->
<!--              style="margin-left: 10px"-->
<!--          >-->
<!--            取消-->
<!--          </el-button>-->
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <div class="my-info-footer">
      最后更新: {{new Date().toLocaleDateString()}}
    </div>
  </div>
</template>

<style src="../../assets/style/MyInfo.css"></style>
<script src="../../script/Mine/UpdateMyInfo.js"></script>